<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>古籍某章节的具体内容</title>
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <style>
        body{
            background-image: url("image/background_img.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
        .card-header{
            color: #0F0F0F;
            font-size: 25px;
            font-weight: bold;
            text-align: center;
        }
        .card-body{
            font-size: 18px;
            letter-spacing: 5px
        }
    </style>
</head>

<body>
    <header id="header"></header>

    <div class="container" id="content">
        <div class="row">
            <div class="col col-sm-12 col-lg-12">

                <div class="card">
                    <div class="card-header">
                        <h3>《<span v-text="info.title">只愿君心似我心，定不负相思意</span>》原文</h3>
                    </div>
                    <div class="card-body">
                        <div class="card-body d-flex">
                            <div>
                                <p v-html="info.body">
                                    李流芳（1575～1629）明代诗人、书画家。字长蘅，一字茂宰，号檀园、香海、古怀堂、沧庵，晚号慎娱居士、六浮道人。歙县（今属安徽）人，侨居嘉定（今属上海市）。三十二岁中举人，后绝意仕途。诗文多写景酬赠之作，风格清新自然。与唐时升、娄坚、程嘉燧合称“嘉定四先生”。擅画山水，学吴镇、黄公望，峻爽流畅，为“画中九友”之一。亦工书法。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer id="footer"></footer>
</body>
<!--引入jq代码-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!--引入jq代码-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    $("#header").load("common/navigation.html")
    $("#footer").load("common/footer.html")

    //获取章节的id
    var id = location.search.split("?")[1]
    let vm_content = new Vue({
        el:"#content",
        data:{
            info:{}
        },
        created:function () {
            axios({
                url:"/djInfo/content/"+id,
                method:"post"
            }).then(function (r) {
                vm_content.info = r.data
            })
        }
    })
</script>
</html>